<template>
	<div ref="barChart" style="width:100%;height:5.25rem;"></div>
</template>

<script>
	import Echart from '@/common/echart';
	import dark from '../../../echarts/dark.json';
	import request from '@/utils/request';
	export default {
		components: {
			Echart
		},
		data() {
			return {
				options: {
					darkMode: true,
					 toolbox: {
					        show: true,
					        feature: {
					            dataZoom: {
					                yAxisIndex: 'none'
					            },
					            dataView: {readOnly: false},
					            magicType: {type: ['line', 'bar']},
					            restore: {},
					            saveAsImage: {}
					        }
					    },
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						smooth: true,
						label: {
						                show: true,
						                position: 'top'
						            }
					}]
				},
			}
		},
		methods: {
			getReuestData() {
				let _this = this;
				request({
					url: '/magic-api/systemLog/request',
					method: 'post',
				}).then(response => {
					debugger
					_this.options.xAxis.data = response.data.category;
					_this.options.series[0].data = response.data.lineData;
					_this.drawChart();
				})
			},
			drawChart() {
			  let echart = this.$echarts.init(this.$refs.barChart,"default ");
			  echart.setOption(this.options);
			},
		},
		mounted() {
			// this.getReuestData();
			this.getReuestData();
			let defaultTheme = require('../../../echarts/default.json');
			this.$echarts.registerTheme('default', defaultTheme.theme);

		}
	}
</script>

<style>
</style>
